<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../fonticons/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content 
			{
				height: 100vh;
			}
			.mui-table-view .mui-table-view-cell{
				border-radius: 5px;
				height: 60px;
				padding: 0;
			}
			.mui-table-view .mui-table-view-cell a{
				margin: 0 0;
				height: 100%;
				padding:20px;
			}
			.mui-content > .mui-table-view:first-child{
				margin: 0;
			}
			
			
			#request .mui-table-view{
				background-color: transparent;
				width: 94%;
				transform: translateX(3%);
				border-radius: 8px;
			}
			#request .mui-table-view-cell{
				/* background-color:  rgba(0,0,0,.2); */ 
				background-color: #000000;
				border-radius:inherit;
				height: inherit;
			}
			#request .mui-table-view .mui-media-object{
				width: 50px;
				height: 50px;
				max-width: none;
				border-radius: 6px;
				box-shadow: 0 0 2px rgba(255,255,255,.7);
			}
			#request .mui-table-view::before,.mui-table-view::after{
				height: 0;
			}
			#request .mui-table-view-cell:after{
				height: 0;
			}
			#request .mui-table-view-cell+.mui-table-view-cell{
				margin-top: 10px;
			}
			#request .mui-table-view  a{
				border-radius: inherit;
				padding: 15px;
			}
			#request .mui-media-body:not(p){
				/* margin-top: 7px; */
				font-size: 14px;
				color: #f4f4f4;
				text-shadow: 0 0 2px #ffffff;
				
			}
			#request .mui-media-body p{
				font-size: 12px;
				margin-top:5px;
			}
			#request #text{
				text-align: center;
				color: #fff;
				font-size: 18px;
				text-shadow: 0 0 4px #ffff00;
			}
			.btn-group{
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				min-width: 100px;
				height:40px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			*[class^='btn-group-']{
				color: #fff;
				border-radius: 5px;
				padding: 6px 10px;
				display: inline-block;
				margin-left: 5px;
				margin-right: 5px;
			}
			.btn-group-info{
				border: 1px solid #848484;
				background-color: #848484 ;
				
			}
			.btn-group-info:active{
				border: 1px solid #6c6c6c;
				background-color: #6c6c6c ;
			}
			.btn-group-success{
				border: 1px solid #00bde2;
				background-color: #00bde2 ;
			}
			.btn-group-success:active{
				border: 1px solid #00a6c3;
				background-color: #00a6c3 ;
			}
			#request .mui-table-view-cell > a:not(.mui-btn).mui-active{
				background-color: transparent;
			}
			#request .request-line{
				width: 93%;
				height: 2px;
				background-color: #000000;
				margin: 12px;
				position: relative;
				
			}
			#request{
				padding: 20px 0;
			}
			
			#request .request-line .request-line-title{
				position: absolute;
				bottom: 100%;
				background-color: #000000;
				color: #fff;
				padding: 2px 5px;
				box-sizing: border-box;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			
			<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="friendQ">
							<i class="iconfont icon-pengyouquan" style="background-image: radial-gradient(green,green);-webkit-background-clip:text;-webkit-text-fill-color:transparent"></i>
							朋友圈
						</a>
					</li>
					
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="scan_code_btn">
							<i class="iconfont icon-saoyisao"></i>
							 扫一扫
						</a>
					</li>
					
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="friends-add">
							<i class="iconfont icon-tianjiahaoyou" ></i>
							 添加朋友
						</a>
					</li>
				</ul>
				
				<div id="request" style="margin-top: 30px;">
					<!-- 好友申请申请 -->
				</div>
			
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/main.js"></script>
		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig:{
					longtap:true
				}
			})
			mui.plusReady(function () {
				const userEntity = JSON.parse(plus.storage.getItem("userInfo"))
				const currentWebview = plus.webview.currentWebview();
				 currentWebview.addEventListener("show",function(){
					 getUserFriendRequest();
				 })
				
				// 点击朋友圈
			    mui('#friendQ')[0].addEventListener("tap",function(){
					plus.nativeUI.toast('该功能尚未实现')
				})
				
				// 点击扫一扫
				mui("#scan_code_btn")[0].addEventListener("tap",function(){
					plus.webview.open("../scan-code.html","../scan-code.html",{top:0})
				})
				
				// 点击添加朋友
				mui('#friends-add')[0].addEventListener("tap",function(){
					mui.openWindow({
						id:"friends-add-search.html",
						url:"../friends-add-search.html",
						show:{
							autoShow:false,
						},
						waiting:{
							 autoShow: true, //自动显示等待框，默认为true  
							 title: '请稍后...', //等待对话框上显示的提示内容  
						}
					})
				})
				
				// 接受申请
				mui(document).on("tap",".accept-btn",function(){
					console.log($(this).parents("li").attr("data-req-id"));
					const $li = $(this).parents("li");
					plus.nativeUI.showWaiting("请稍后...")
					_SERVER.user.acceptUserReq(userEntity.token,$li.attr("data-req-id")).then(res=>{
						plus.nativeUI.closeWaiting();
						if(res.code === "200"){
							getUserFriendRequest();
							var user_name = $li.find(".mui-media-body > span").text();
							mui.toast("你已接受"+user_name+"申请")
						}else{
							mui.alert(res.msg,"提示","OK",()=>{},"div")
						}
					})
				})
				
				// 忽略请求
				mui(document).on("tap",".ignore-btn",function(){
					
					const $li = $(this).parents("li");
					plus.nativeUI.showWaiting("请稍后...")
					_SERVER.user.ignoreUserReq(userEntity.token,$li.attr("data-req-id")).then(res=>{
						plus.nativeUI.closeWaiting();
						if(res.code === "200"){
							getUserFriendRequest();
							var user_name = $li.find(".mui-media-body > span").text();
							mui.toast("你已将"+user_name+"申请忽略")
						}else{
							mui.alert(res.msg,"提示","OK",()=>{},"div")
						}
					})
				})
			})
			
			// 加载用户朋友申请列表
			const getUserFriendRequest = function(){
				const entity = JSON.parse(plus.storage.getItem("userInfo"));
				_SERVER.user.queryFriendsRequest(entity.token).then(res=>{
					if(res.code === "200"){
						const html = getHtml(res.data);
						$("#request").html(html);
					}
				})
			}
			// 获取html
			function getHtml(data){
				var html="";
				if(!data || data.length == 0){
					return html;
				}
				
				html+='<div class="request-line">';
					html+='<span class="request-line-title">好友申请</span>';
				html+='</div>';
				html+='<ul class="mui-table-view" >';
				for (var i = 0; i < data.length; i++) {
					html+='<li class="mui-table-view-cell mui-media" data-req-id="'+data[i].id+'" data-user-id="'+data[i].reqUserId+'">';
						html+='<a href="javascript:;">';
							html+='<img class="mui-media-object mui-pull-left preview-img-tap" src="'+(data[i].userPhoto?data[i].userPhoto:"../../img/def_photo.jpg")+'">';
							html+='<div class="mui-media-body">';
								html+='<span>'+data[i].name+'</span>';
								html+='<p class="mui-ellipsis">易信号：'+data[i].userNo+'</p>';
							html+='</div>';
							html+='<div class="btn-group">';
								html+='<span class="btn-group-info ignore-btn">忽略</span>';
								html+='<span class="btn-group-success accept-btn" >接受</span>';
							html+='</div>';
						html+='</a>';
					html+='</li>';
				}
						
				html+='</ul>';
			
				return html;
			}
		</script>
	</body>

</html>
